<template xmlns="">
  <div class="mt-4" style="position:relative;top: 3.7rem;left: 10%;width: 90%;">



    <!--头部选择-->
  <div class="container-fluid">
    <div class="card">
      <div class="card-body">

        <div class="col-12 form-inline">
         <span style="font-size: 15px">选择店铺</span>&emsp;
          <select class="form-control " style="width: 200px">
            <option>请选择</option>
            <option>2</option>
          </select>

        </div>
      </div>
    </div>
  </div>
    <!--实时概况-->
    <div class="container-fluid mt-4">
      <div class="card">
        <div class="card-body">
          <div class="col-12 p-0 mb-4">
            <p><i class="zi zi_minus zi_rotate90 p-0 m-0" style="color: blue" ></i> 实时概况</p>
          </div>
          <div class="container-fluid">
            <div class="row-fluid form-inline">
              <div class="font-color-order col-3">
                <div class="card order-background">
                  <div class="card-body">

                    <span><small>今日新增用户(人)</small><br></span>
                    <p class="h1 order-true"> <strong><span>3</span></strong> </p>
                    <span>昨日：<span>5</span></span><br>

                  </div>
                </div>
              </div>

              <div class="font-color-order col-3">
                <div class="card order-background">
                  <div class="card-body">
                    <span><small>今日付费用户(人)</small><br></span>
                    <p class="h1 order-true"> <strong><span>0</span></strong> </p>
                    <span>昨日：<span>0</span></span><br>
                  </div>
                </div>
              </div>
              <div class="font-color-order col-3">
                <div class="card order-background">
                  <div class="card-body">
                    <span><small>会员用户(人)</small><br></span>
                    <p class="h1 order-true"> <strong><span>68</span></strong> </p>
                    <span>昨日：<span>63</span></span><br>
                  </div>
                </div>
              </div>
              <div class="font-color-order col-3">
                <div class="card order-background">
                  <div class="card-body">
                    <span><small>累计用户(人)</small><br></span>
                    <p class="h1 order-true"> <strong><span>102</span></strong> </p>
                    <span>累计付费用户：<span>83</span></span><br>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--图表-->
  <div class="container-fluid mt-4 ">
    <div class="card">
      <div class="card-body">
    <div class="row-fluid form-inline">
    <div class="col-4 ">
      <div class="">
        <div class="card-body">
          <div class="col-12 p-0 mb-4">
            <p><i class="zi zi_minus zi_rotate90 p-0 m-0" style="color: blue" ></i> 会员总览</p>
          </div>
          <div id="user-Overview" style="height: 300px"></div>
        </div>
      </div>
    </div>

    <div class="col-4 ">
      <div class="">
        <div class="card-body">
          <div class="col-12 p-0 mb-4">
            <p><i class="zi zi_minus zi_rotate90 p-0 m-0" style="color: blue" ></i> 会员比例</p>
          </div>
          <div id="proportion" style="height: 300px"></div>
        </div>
      </div>
    </div>

    <div class="col-4 ">
      <div class="">
        <div class="card-body">
          <div class="col-12 p-0 mb-4">
            <p><i class="zi zi_minus zi_rotate90 p-0 m-0" style="color: blue" ></i> 付费总览</p>
          </div>
          <div id="user-pay" style="height: 300px"></div>
        </div>
      </div>
    </div>
  </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
export default {
  name: "UserProfile",
  mounted(){
    this.drawLine();
    this.drawLine2();
    this.drawLine3();
  },
  methods: {
    drawLine(){
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('user-Overview'))
      // 绘制图表
      myChart.setOption({

          legend: {
            orient: 'vertical',
            x: 'right',
            data: ['微信小程序', '支付宝小程序']
          },
        color:[
          '#5E5CFF','#4CA8FF'
        ],
          series: [
            {
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center',
                emphasis: {
                  show: true
                }
              },
              labelLine: {
                show: false
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              },
              data: [
                { value: 335, name: '微信小程序' },
                { value: 310, name: '支付宝小程序' },

              ]
            }
          ]

      });
    },
    drawLine2(){
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('proportion'))
      // 绘制图表
      myChart.setOption({

        legend: {
          orient: 'vertical',
          x: 'right',
          data: ['会员用户', '普通用户'],

        },
        color:[
          '#5E5CFF','#4CA8FF'
        ],
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
              emphasis: {
                show: true
              }
            },
            labelLine: {
              show: false
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            data: [
              { value: 335, name: '会员用户' },
              { value: 3230, name: '普通用户' },

            ]
          }
        ]

      });
    },
    drawLine3(){
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('user-pay'))
      // 绘制图表
      myChart.setOption({

        legend: {
          orient: 'vertical',
          x: 'right',
          data: ['付费用户', '未付费用户']
        },
        color:[
          '#5E5CFF','#4CA8FF'
        ],
        series: [
          {
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
              emphasis: {
                show: true
              }
            },
            labelLine: {
              show: false
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            data: [
              { value: 335, name: '付费用户' },
              { value: 335, name: '未付费用户' },

            ]
          }
        ]

      });
    }



  }


}

</script>

<style scoped>
/*
实时概况卡片背景颜色
*/
.order-background{
  background-color: #f4f4f4;
}
/*
实时概况字体颜色
*/
.font-color-order{
  color: #999;
}
.order-true{
  color: black;
}
</style>
